<template>
  <div id="info">
    <infoIn :trs="false">
      <template #Center> 个人信息 </template>
    </infoIn>
    <div class="nav-box">
      <div class="nav-b" @click="show = true">
        <span>头像</span>
        <div class="psp">
          <img :src="rtrt.avatar" alt="" />
          <p></p>
        </div>
      </div>
      <!-- 2 -->
      <div class="nav-b">
        <span>昵称</span>
        <div class="psp">
          {{ rtrt.nickname }}
          <p></p>
        </div>
      </div>
      <!-- 3 -->
      <div class="nav-b">
        <span>手机号</span>
        <div class="psp">
          {{ rtrt.mobile }}
          <p></p>
        </div>
      </div>
      <!-- 4 -->
      <div class="nav-b">
        <span>性别</span>
        <div class="psp">
          保密
          <p></p>
        </div>
      </div>
      <!-- 5 -->
      <div class="nav-b">
        <span>出生日期</span>
        <div class="psp">
          请选择
          <p></p>
        </div>
      </div>
      <!-- 6 -->
      <div class="nav-b">
        <span>所在城市</span>
        <div class="psp">
          {{ rtrt.province_name }},{{ rtrt.city_name }},{{ rtrt.district_name }}
          <p></p>
        </div>
      </div>
      <!-- 7 -->
      <div class="nav-b">
        <span>学科</span>
        <div class="psp">
          <p></p>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <div class="popup">拍照</div>
      <div class="popup">
        <span @click="uploadFile">从相册选择</span>
        <input type="file" v-show="false" ref="fileRef" @change="filechange" />
      </div>
      <div class="popup" @click="show = false">取消</div>
    </van-popup>
  </div>
</template>
<script>
import infoIn from "@/views/infoin.vue";
import { postImg, putUser, getuserInfo } from "./yibu/my";
export default {
  components: {
    infoIn,
  },
  data() {
    return {
      rtrt: [],
      show: false,
    };
  },
  mounted() {
    this.putUs();
  },
  methods: {
    async putUs() {
      let res = await getuserInfo();
      console.log(res);
      this.rtrt = res.data.data;
    },
    uploadFile() {
      this.$refs.fileRef.dispatchEvent(new MouseEvent("click"));
    },
    async filechange(e) {
      console.log(e.target.files);
      let x = e.target.files[0];
      console.log(x);
      const fd = new FormData();
      console.log(fd);
      fd.set("file", x);
      //   //上传 头像
      const res = await postImg(fd);
      console.log(res);

      //修改 头像地址
      const userInfo = await putUser({
        avatar: res.data.data.path,
      });

      // 调用 用户详情数据
      this.putUs();
    },
  },
};
</script>
<style lang="scss" scoped>
#info {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
  .nav-box {
    background: white;
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .nav-b {
      width: 85%;
      height: 50px;
      font-size: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .psp {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        p {
          width: 15px;
          height: 15px;
          border-top: 2px solid rgba(0, 0, 0, 0.1);
          border-left: 2px solid rgba(0, 0, 0, 0.1);
          transform: rotate(135deg);
        }
      }
    }
    .nav-b:nth-child(7) {
      border-bottom: none;
    }
  }
  .van-popup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .popup {
      width: 80%;
      height: 33.33%;
      font-size: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}
</style>